<template>
  <div class="records-container">
    <van-nav-bar
      title="祈福记录"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
      class="custom-nav"
      :height="88"
    />

    <!-- 使用 List 组件包裹内容 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="records.length >= total ? '没有更多记录了' : ''"
        @load="onLoad"
        :immediate-check="false"
      >
        <!-- 空状态显示 -->
        <div v-if="loaded && records.length === 0" class="empty-state">
          <van-empty
            class="custom-empty"
            image="search"
            description="暂无祈福记录"
          >
            <template #image>
              <img src="@/assets/images/no-records.png" class="empty-image" />
            </template>
          </van-empty>
        </div>

        <!-- 记录列表 -->
        <div class="records-list" v-if="loaded && records.length > 0">
          <div v-for="record in records" :key="record.id" class="record-item">
            <div class="record-content">
              <van-image
                :src="lampIcon"
                width="120"
                height="120"
                radius="12"
                class="temple-image"
              />
              <div class="record-info">
                <div class="status-line">
                  <div class="location">
                    <span class="temple-name">{{ record.hall }}</span>
                    <span class="area-name">{{ record.area }}</span>
                  </div>
                  <div class="status-group">
                    <span class="status" :class="record.supplyStatus === '供奉中' ? 'active' : ''">
                      {{ record.supplyStatus }}
                    </span>
                    <van-icon
                      name="gift-o"
                      size="20"
                      class="blessing-icon"
                      @click="showBlessingImage(record)"
                    />
                  </div>
                </div>
                <div class="time">供奉时间：{{ record.startTime }}</div>
                <div class="details">
                  <van-tag round type="primary" size="medium">{{ record.lampType }}</van-tag>
                  <van-tag round plain type="primary" size="medium">第{{ record.rowNu }}排 第{{ record.columnNu }}列</van-tag>
                  <van-tag round plain type="primary" size="medium">{{ record.days }}天</van-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载状态 -->
        <div v-if="!loaded" class="loading-state">
          <van-loading type="spinner" color="#DF5454" size="88px">加载中...</van-loading>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 功德符弹窗 -->
    <van-dialog
      v-model:show="showDialog"
      title="功德符"
      :closeOnClickOverlay="true"
      :show-confirm-button="true"
      class="blessing-dialog"
      width="90%"
    >
      <van-image
        src="https://ai-public.mastergo.com/ai/img_res/69f286ddd90dca787896dcc3d1e6cedc.jpg"
        width="100%"
        fit="contain"
      />
    </van-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import lampIcon from '@/assets/images/lamp-icon.png'
import { listUserOrder } from "@/api/lotos-lamp.js";
import {useUserStore} from "@/store/user.js";
const userStore = useUserStore()
const router = useRouter()
const showDialog = ref(false)
const currentBlessingImage = ref('https://ai-public.mastergo.com/ai/img_res/69f286ddd90dca787896dcc3d1e6cedc.jpg')
const total = ref(0)
const records = ref([])
const loaded = ref(false)

// 新增的状态变量
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const pageNum = ref(1)
const pageSize = 10

// 加载数据的方法
const loadData = async (isRefresh = false) => {
  try {
    // 判断是否加载完所有数据
    if (records.value.length >= total.value) {
      finished.value = true
    } else {
      const res = await listUserOrder({
        openid: userStore.userInfo.openid,
        status: '0',
        pageNum: pageNum.value,
        pageSize
      })

      if (isRefresh) {
        records.value = res.rows
      } else {
        records.value = [...records.value, ...res.rows]
      }
    }
    loaded.value = true
    loading.value = false
    refreshing.value = false
  } catch (error) {
    console.error('加载数据失败:', error)
    loading.value = false
    refreshing.value = false
    finished.value = true
  }
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  pageNum.value = 1
  records.value = []
  loadData(true)
}

// 上拉加载更多
const onLoad = () => {
  if (records.value.length < total.value) {
    loading.value = true
    pageNum.value += 1
    loadData(false)
  } else {
    finished.value = true
    loading.value = false
  }
}

// 初始加载
onMounted(() => {
  listUserOrder({
    openid: userStore.userInfo.openid,
    pageNum: pageNum.value,
    status: '0',
    pageSize
  }).then(res => {
    records.value = res.rows
    total.value = res.total
    loaded.value = true
    loading.value = false
  })
})

const onClickLeft = () => {
  router.back()
}

const showBlessingImage = (record) => {
  currentBlessingImage.value = record.blessingImage
  showDialog.value = true
}
</script>

<style scoped>
.records-container {
  background-color: var(--primary-bg);
  min-height: 100vh;
}

/* 自定义导航栏样式 */
.custom-nav {
  background-color: transparent;
}

:deep(.van-nav-bar) {
  height: 88px !important;
  line-height: 88px !important;
}

:deep(.van-nav-bar__content) {
  height: 88px !important;
}

:deep(.van-nav-bar__title) {
  color: var(--text-primary) !important;
  font-size: 36px !important;
  font-weight: bold;
  transform: translateX(0) !important;
  max-width: 100% !important;
}

/* 调整返回箭头大小和位置 */
:deep(.van-nav-bar .van-icon) {
  color: var(--text-primary) !important;
  font-size: 48px !important;
}

:deep(.van-nav-bar__left) {
  padding-left: 16px !important;
  font-size: 32px !important;
}

.records-list {
  padding: 16px 16px 0 16px;
}

.record-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
  border-radius: 16px;
  padding: 20px;
}

.record-content {
  display: flex;
  gap: 16px;
}

.temple-image {
  flex-shrink: 0;
}

.record-info {
  flex: 1;
  color: #fff;
}

.status-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status {
  color: var(--text-secondary);
  font-size: 24px;

  &.active {
    color: #DF5454;
    font-weight: bold;
  }
}

.blessing-icon {
  color: #DF5454;
  cursor: pointer;
}

.location {
  margin-bottom: 0;
}

.temple-name {
  font-size: 28px;
  font-weight: bold;
  color: var(--text-primary);
  margin-right: 8px;
}

.area-name {
  font-size: 24px;
  color: rgba(174, 171, 171, 0.8);
}

.time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  margin-bottom: 12px;
}

.details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

:deep(.van-tag) {
  padding: 4px 12px;
  font-size: 24px;
}

:deep(.van-tag--primary) {

  border: none;
}

:deep(.van-tag--plain) {
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* 功德符弹窗样式 */
:deep(.blessing-dialog .van-dialog) {
  border-radius: 20px;
  overflow: hidden;
  width: 90% !important;
  max-width: 600px !important;
  background-color: #FFF5E6 !important;
}

:deep(.blessing-dialog .van-dialog__header) {
  padding: 24px !important;
  font-size: 32px !important;
  font-weight: bold;
  line-height: 44px !important;
  background-color: #FFF5E6 !important;
}

:deep(.blessing-dialog .van-dialog__content) {
  padding: 24px !important;
  background-color: #FFF5E6 !important;
}

:deep(.blessing-dialog .van-dialog__footer) {
  padding: 16px 24px 32px !important;
  background-color: #FFF5E6 !important;
}

/* 修改确认按钮样式 */
:deep(.blessing-dialog .van-dialog__confirm) {
  background-color: #FFF5E6 !important;
  color: var(--text-primary) !important;
  font-size: 32px !important;
  font-weight: bold !important;
}

/* 修改按钮激活状态样式 */
:deep(.blessing-dialog .van-dialog__confirm:active) {
  background-color: #FFF0D9 !important; /* 点击时稍微加深背景色 */
}

/* 移除按钮的边框 */
:deep(.blessing-dialog .van-hairline--top) {
  border-top: none !important;
}

:deep(.blessing-dialog .van-button) {
  border: none !important;
}

:deep(.blessing-dialog .van-image) {
  width: 100% !important;
  height: auto !important;
  max-height: 70vh !important;
}

/* 修改空状态样式 */
.empty-state {
  background: var(--secondary-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 88px);
  padding: 32px;
}

.custom-empty {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-primary) !important;
}

.empty-image {
  width: 240px !important;
  height: 240px !important;
  margin-bottom: 32px !important;
  object-fit: contain !important;
  filter: invert(26%) sepia(19%) saturate(638%) hue-rotate(346deg) brightness(92%) contrast(89%) !important;
}

:deep(.van-empty__description) {
  color: var(--text-primary) !important;
  font-size: 32px !important;
  line-height: 44px !important;
  text-align: center !important;
  width: 100% !important;
  margin-top: 0 !important;
}

:deep(.van-empty__image) {
  width: 240px !important;
  height: 240px !important;
  margin-bottom: 32px !important;
}

/* 修改加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 88px);
  padding: 32px;
}

:deep(.van-loading) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

:deep(.van-loading__spinner) {
  width: 88px !important;
  height: 88px !important;
  margin-bottom: 24px !important;
}

:deep(.van-loading__text) {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 32px !important;
  margin-top: 24px !important;
  text-align: center !important;
}

/* 列表容器样式 */
:deep(.van-list) {
  min-height: calc(100vh - 88px);
  padding-bottom: 32px;
}

/* 加载更多文本样式 */
:deep(.van-list__finished-text) {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 28px !important;
  padding: 24px 0 !important;
}

/* 下拉刷新文本样式 */
:deep(.van-pull-refresh__head) {
  color: #fff !important;
  font-size: 28px !important;
}
</style>
